<template>
	<view :style="globalColor.style">
		<view class="fixed-space" :style="{ height: h + 'rpx' }"></view>
		<view class="min-space"></view>
		<view class="fixed-bottom fboxCol">
			<view class="btn-groupo fboxRow">
				<!-- <slot></slot> -->
				<u-button :customStyle="btnObj" @click="viewMine" :color="colorStyle" class="appBtn" type="primary" :text="title" style="width: 100%;"></u-button>
			</view>
			<view class="min-space"></view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		h: {
			type: Number,
			default: 102
		},
		title: {
			type: String,
			default: ''
		},
		backGroundColor: {
			type: String,
			default: '#1a1d25'
		},
		colorStyle: {
			type: String,
			default: 'linear-gradient(360deg, #AD7B54 0%, #D8A37A 100%)'
		}
	},
	emits: ['btnClick'],
	data() {
		return {
			globalColor: getApp().globalData.globalColor,
			btnObj: {
				color: '#000',
				border: 'none'
			}
		};
	},
	watch:{
		globalColor:{
			handler(newVal){
				this.btnObj.color = newVal['buttonTextColor']
			},
			immediate:true,
			deep:true
		}
	},
	methods: {
		viewMine() {
			this.$emit('btnClick');
		}
	}
};
</script>

<style lang="scss" scoped>
.fixed-space {
	height: 102rpx;
}
::v-deep .u-button {
	height: 80rpx;
	.u-button__text {
		font-size: 28rpx !important;
		color: var(--buttonTextColor);
	}
}
.fixed-bottom {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--controllerBgColor);
	padding-top: 30rpx !important;
	padding-bottom: 40rpx;
}

.fixed-bottom .btn-groupo {
}
.min-space {
	height: 10rpx;
}
</style>
